<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DeepSeek AI 聊天助手</title>
    <link rel="stylesheet" href="style.css">
    <!-- MathJax - 确保配置在加载之前定义 -->
    <script>
        window.MathJax = {
            tex: {
                // inlineMath: [['$', '$'], ['\$', '\$']]
                inlineMath: [['$', '$'], ['\$', '\$'], ['\\(', '\\)'], ['\(', '\)']],
                //inlineMath: [['$', '$'], ['\\(', '\\)']],
                // 添加方括号支持
                displayMath: [['$$', '$$'], ['\\[', '\\]'], ['[', ']']] 
            },
            chtml: {
                scale: 1.0,
                displayAlign: 'center'
            },
            startup: {
                ready: () => {
                    console.log('MathJax 已就绪');
                    // 可选：覆盖默认的 typeset 流程
                    MathJax.startup.defaultReady();
                }
            }
        };
    </script>

    <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>

    <script>
        // 等待 MathJax 完全初始化
        window.onload = function () {
            if (typeof MathJax !== 'undefined' && typeof MathJax.typesetPromise === 'function') {
                MathJax.typesetPromise().then(() => {
                    console.log('公式渲染完成');
                }).catch(err => {
                    console.error('渲染失败:', err);
                });
            } else {
                console.error('MathJax 未正确加载或版本不支持 typesetPromise');
            }
        };
    </script>
</head>
<body>
    <div class="chat-container">
        <div class="chat-header">
            <img src="logo.png" width="120px" />
            <p>支持流式响应、Markdown和数学公式</p>
        </div>

        <div class="chat-messages" id="chatMessages">
            <div class="system-message">
                欢迎使用DeepSeek AI聊天助手！我可以帮助您解答问题。
            </div>

        </div>

        <div class="chat-input-container">
            <textarea id="userInput" placeholder="请输入您的问题..." rows="3"></textarea>
            <div class="input-actions">
                <button id="clearButton" class="btn-secondary">清空</button>
                <button id="sendButton" class="btn-primary" disabled>发送</button>
            </div>
        </div>
    </div>
    <script src="jquery-2.1.1.js"></script>
    <script src="marked.min.js"></script>
    <script src="app.js"></script>
</body>
</html>